<template>
  <div>
    <!-- 发布文章的表单 -->
    <el-form :model="form" :rules="formRules" ref="formRef" label-width="auto">
      <el-form-item label="标题" prop="title" style="width: 400px">
        <el-input v-model="form.title" placeholder="请输入文章标题" />
      </el-form-item>

      <el-form-item label="频道" prop="channel_id" style="width: 400px">
        <!-- 下拉菜单 -->
        <el-select v-model="form.channel_id" placeholder="请选择文章频道">
          <el-option :label="item.name" :value="item.id" v-for="item in channels" />
        </el-select>
      </el-form-item>

      <el-form-item label="封面">
        <!-- 单选按钮组 -->
        <el-radio-group v-model="form.cover_type">
          <el-radio :value="1">单图</el-radio>
          <el-radio :value="3">三图</el-radio>
          <el-radio :value="0">无图</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label=" " v-if="form.cover_type !== 0">
        <!-- 上传文件的组件 -->
        <!-- 一定要保证上传组件，拥有一个 :auto-upload="false" 属性，从而禁用默认上传图片的机制 -->
        <!-- 因此，咱们选择完文件后，需要手动上传文件 -->
        <el-upload
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          :limit="form.cover_type"
          v-model:file-list="files"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="内容">
        <div style="width: 100%">
          <!-- 必须在 id="editor" 的外面，包裹一层 div，防止布局样式紊乱的问题 -->
          <div id="editor" style="min-height: 200px"></div>
        </div>
      </el-form-item>

      <el-form-item label=" ">
        <el-button @click="onSubmit('草稿')">存为草稿</el-button>
        <el-button type="primary" @click="onSubmit('待审核')">发布文章</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
// 组件首次挂载完毕后，会自动执行 onMounted 生命周期函数
import { reactive, onMounted, ref, watch } from 'vue'
// 按需导入接口
import { getChannelsApi, postArticleApi } from '../../api'
// 导入富文本的 js 文件
import Quill from 'quill'
// 导入富文本配套的样式
// import 'quill/dist/quill.snow.css'
// 导入工具栏的配置
import { toolbarOptions } from './toolbar'
import { ElMessage } from 'element-plus'

let quill

onMounted(() => {
  quill = new Quill('#editor', {
    // 主题
    theme: 'snow',
    modules: {
      // 配置工具栏
      toolbar: toolbarOptions
    }
  })
})

// 初始化频道的列表数据
const channels = ref([])
// 用户选择的图片，会保存到这个数组中
const files = ref([])
// 指向页面中的表单容器
const formRef = ref(null)

onMounted(async () => {
  const result = await getChannelsApi()
  // 把请求获取到的频道列表数据，存储到 channels 中
  channels.value = result.data
})

// 表单的数据对象
const form = reactive({
  // 文章的标题
  title: '',
  // 频道的 id
  channel_id: '',
  // 文章封装的数量（数值类型）
  cover_type: 1
})

// 通过 getter 函数，提供要侦听的数据源
watch(
  () => form.cover_type,
  () => {
    files.value = []
  }
)

// 表单的校验对象
const formRules = {
  title: [
    // 必填项
    { required: true, message: '标题不能为空！' }
  ],
  channel_id: [
    // 必填项
    { required: true, message: '频道不能为空！' }
  ]
}

const onSubmit = (status) => {
  formRef.value.validate(async (vr) => {
    if (!vr) return

    // 校验封面数量
    if (form.cover_type !== files.value.length) {
      if (files.value.length === 0) {
        // 用户没有选择任何封面
        ElMessage.error('请选择文章封面！')
      } else {
        // 用户选择了封面，但是数量不匹配
        ElMessage.error('封面数量不匹配！')
      }
      return
    }

    // 1. 准备数据
    const fd = new FormData()
    // fd.append('数据名', 值)
    fd.append('title', form.title)
    fd.append('cover_type', form.cover_type)
    fd.append('channel_id', form.channel_id)
    fd.append('status', status)
    // 文章内容
    const content = quill.root.innerHTML
    fd.append('content', content)
    // 文章封面
    files.value.forEach((item) => {
      // 注意：item.raw 才是真正的选中的文件
      fd.append('cover_images', item.raw)
    })

    // 2. 封装和调用接口
    const result = await postArticleApi(fd)
    if (result.message === 'success') {
      // 成功
      ElMessage.success('发布文章成功！')
    } else {
      // 失败
      ElMessage.error('发布文章失败！')
    }
  })
}
</script>
